/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="model-deployment-page">
        <sf-tab-panel ref="optionsTabpanel"
                    size="large"
                    :tab-width="136"
                    :keep-alive="false">
                <sf-tab-item title="model Repository">
                    <model-repository class="model-deployment"></model-repository>
                </sf-tab-item>
                <sf-tab-item title="service Manager">
                    <service-manager class="model-deployment"></service-manager>
                </sf-tab-item>
        </sf-tab-panel>            
    </div>
</template>

<script>
import modelRepository from '../model_repository/index.vue';
import serviceManager from '../service_manager/index.vue';

export default { 
    components: {
        modelRepository,
        serviceManager
    }
};
</script>

<style lang="less" scoped>
.model-deployment-page {


    .model-deployment { 
        margin-left: 20px;
        margin-top: 10px;
        height: calc(100vh - 98px);
    }

    /deep/ .sfv-tabpanel .sfv-tabpanel_header {
        border-bottom: 1px solid #ddd;
        height: 41px;
        margin-top: 20px;
        
        .sfv-tabpanel_item {
            color: #8D8D8D;
            font-size: 16px;
            height: 40px;
            width: 158px !important;
            padding: 0;

            &:hover {
                color: #3D3D3D;
                background-color: unset;
            }
        }
        .sfv-tabpanel_scroll {
            margin-left: 22px;
        }
    }

    /deep/ .sfv-tabpanel .sfv-tabpanel_header .sfv-tabpanel_item.sfv-tabpanel_item--active{
        color: #3D3D3D;
        border-bottom: unset !important;

        &::after {
            content: '';
            position: absolute;
            left: 8px;
            bottom: 0px;
            width: 144px;
            height: 5px;
            background-color: #212121;
            border-radius: 4px;
        }
    }
}
</style>
